<template>
  <!-- 待接单 -->
  <scroll-view
    class="order-detail unReceive"
    :scroll-y="true"
    :scroll-top="scrollTop"
  >
    <cover-image
      :src="getImgSrc('/address/map_back.png')"
      class="back"
      @tap="back()"
    ></cover-image>
    <view id="map" />
    <view class="order-info">
      <view class="block">
        <!-- <view class="block-title mg-b-30"
          >预计接单后 <text>60分钟</text> 内完成</view
        >
        <view> -->
				<view class="block-title mg-b-30"
					>赏金猎人接单后将尽快完成，请耐心等待</view
				>
				<view>
          <view class="block-btn" @tap="cancelOrder">
            <image
              :src="getImgSrc('/cuser/icon_cancel@2x.png')"
              mode="aspectFit"
            />
            取消发布
          </view>
          <view class="block-btn" @tap="modifyAddress">
            <image
              :src="getImgSrc('/cuser/icon_edit@2x.png')"
              mode="aspectFit"
            />
            修改地址
          </view>
        </view>
      </view>
      <view class="divider" />
      <view class="list pd-50">
        <view class="list-info">
          <view class="list-info-label">任务号:</view>
          <view class="list-info-value"
            >{{ orderInfo.tradeNo || "-" }}
            <image
              @tap="clip"
              class="list-icon-copy"
              :src="getImgSrc('/cuser/icon_copy@2x.png')"
            />
          </view>
        </view>
        <!-- <view class="list-info">
          <view class="list-info-label">预计预计完成:</view>
          <view class="list-info-value">{{ orderInfo.requestedTime }}</view>
        </view> -->
        <view class="list-info">
          <view class="list-info-label">支付方式:</view>
          <view class="list-info-value">{{ orderInfo.payTypeName }}</view>
        </view>
        <view class="list-info">
          <view class="list-info-label">发布时间:</view>
          <view class="list-info-value">{{ orderInfo.createTime || "-" }}</view>
        </view>
        <!-- <view class="list-info">
          <view class="list-info-label">预计完成时间:</view>
          <view class="list-info-value">{{ estimatedTime }}</view>
        </view> -->
      </view>
      <view class="divider" />
      <view class="detail pd-50">
        <view class="detail-address">
          <view class="detail-take">
            <text class="detail-icon">始</text>
            <text>{{ takeAddress }}</text>
          </view>
          <view class="detail-receive">
            <text class="detail-icon">终</text>
            <text>{{ receiveAddress }}</text>
          </view>
        </view>
        <view class="detail-info">
          <view class="detail-category">
            <view
              >任务类型：{{ (orderInfo.goodsTypeList || []).join("、") }}</view
            >
            <view>难度系数/kg：{{ orderInfo.weight || 0 }}kg</view>
            <view>备注：{{ orderInfo.remark }}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import OrderMixin from "./mixin";
import moment from 'moment'
export default {
  mixins: [OrderMixin],
  data() {
    return {};
  },
  mounted(option) {
    this.initMap(this.latitude).then(() => this.updateMarker(true));
  },
  watch: {
    // latitude: {
    //   immediate: true,
    //   handler(newV, oldV) {
    //     this.initMap(newV).then(this.updateMarker);
    //   },
    // },
    orderInfo(newV, oldV) {
      if (newV.runner) {
        const { lat, lon } = newV.runner;
        const { lat: _lat, lon: _lon } = oldV.runner;
        if (lat !== _lat || lon !== _lon) {
          this.updateMarker();
        }
      } else {
        console.log('没有获取到当前跑腿员的位置')
      }
    },
  },
  computed: {
			estimatedTime() {
				const time = this.orderInfo.createTime;
        console.log('time: ', time);
				if(!time) return '-';
				try {
					return moment(time.replace(/-/, '/')).add(1, 'hours').format('YYYY-MM-DD hh:mm:ss')
				}catch(err) {
          console.error('err: ', err);
					return time
				}
			}
		},
  methods: {
    back() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.redirectTo({
          url: "/pages/sys/home/index",
        });
      }
    },
    cancelOrder() {
      const self = this;
      uni.showModal({
        content: "是否确认取消订单",
        success: (res) => {
          if (res.confirm) {
            self.$u.api
              .invokeCancelOrder({ tradeNo: self.orderId })
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({ title: "取消成功" });
                  self.$emit("onRefresh");
                }
              });
          } else {
          }
        },
      });
    },
    modifyAddress() {
      // const { lat, lon } = this.orderInfo.addr;
      // uni.navigateTo({
      //   url: `/subPages/map/map-wx?lon=${lon}&lat=${lat}`,
      // });
      uni.navigateTo({
        url: `/pages/sys/cuser/address?orderId=${this.orderInfo.tradeNo}`,
      });

      // this.$u.vuex("vuex_site", this.orderInfo);
      // this.$u.vuex(
      //   "vuex_sendOrGet",
      //   this.orderInfo.serviceType === 0 ? "send" : "get"
      // );
    },
    clip() {
      uni.setClipboardData({
        data: this.orderInfo.tradeNo,
        showToast: true,
      });
    },
    getData() {},
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";

.unReceive {
  height: 100vh;

  .order-info {
    position: relative;
    background: #ffffff;
    margin-top: -45rpx;
    z-index: 9999;
    box-shadow: 0 -20rpx 42rpx 8rpx rgba(112, 112, 112, 0.1);
    border-radius: 42rpx 42rpx 0 0;
    padding: 57rpx 0 50rpx;
  }

  .divider {
    width: 100%;
    height: 1rpx;
    margin: 0 auto;
    width: 650rpx;
    background: #eaeaea;
  }

  .block {
    padding: 0 50rpx;

    &-title {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #282828;
      line-height: 36rpx;

      text {
        color: #4e95fc;
        font-size: 36rpx;
        padding: 0 10rpx;
      }
    }

    &-desc {
      margin: 30rpx auto 37rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #696969;
      line-height: 46rpx;
      white-space: pre-wrap;

      text {
        color: #fd9c5f;
        font-size: 30rpx;
        padding: 0 10rpx;
      }
    }

    &-btn {
      margin-bottom: 50rpx;
      width: 220rpx;
      height: 64rpx;
      background: #ffffff;
      border: 1rpx solid #cccccc;
      border-radius: 32rpx;
      text-align: center;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 36rpx;
      margin-right: 30rpx;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-right: 8rpx;
      }
    }
  }
}
</style>
